<template>
    <div>
        <vxe-toolbar custom ref="toolbarRef">
            <template #buttons>
                <el-button
                        type="primary"
                        icon="el-icon-plus"
                        @click="insertAdditionalCost"
                        v-if="this.editable"
                >
                    新增
                </el-button>
            </template>
            <template #tools>

                <el-tooltip content="清空筛选" placement="top">
                    <vxe-button  icon="vxe-icon-delete" class="tool-btn" @click="$refs.tableRef.clearFilter()" circle></vxe-button>
                </el-tooltip>

                <vxe-button icon="vxe-icon-refresh" class="tool-btn" @click="refresh" circle
                            style="margin-right: 12px;"></vxe-button>
            </template>
        </vxe-toolbar>
        <vxe-grid
                v-bind="gridOptions"
                id="tableRef"
                ref="tableRef"
                show-footer
                class="mytable-scrollbar"
                :data="list"
                :edit-rules="validRules"
                :tooltip-config="{ zIndex: 9999 }"
                :customConfig="customConfig"
                :menu-config="menuConfig"
                :footer-method="footerMethod"
                :edit-config="{
                trigger: 'click',
                mode: 'row',
                showUpdateStatus: true,
                showInsertStatus: true,
                beforeEditMethod:beforeEdit}"
                @edit-closed="editClosedEvent"
                @edit-actived="editActivedEvent"
                @menu-click="contextMenuClickEvent">

            <template #unit_edit="scope">
                <el-select v-model="scope.row.unit" type="text" clearable transfer filterable>
                    <el-option
                            v-for="item in unitList"
                            :key="item.name"
                            :value="item.name"
                            :label="item.name"/>
                </el-select>
            </template>

            <template #currency_edit="scope">
                <el-select v-model="scope.row.currency" type="text" clearable transfer filterable>
                    <el-option
                            v-for="item in rmbDic"
                            :key="item.dictKey"
                            :value="item.dictValue"
                            :label="item.dictValue"/>
                </el-select>
            </template>

            <template #price_edit="scope">
                <vxe-input v-model="scope.row.price" type="float" digits="4"  max="99999999" :controls="false"  @change="(value)=>calTotalPrice(value.value,scope.row.deliNum,scope)"
                ></vxe-input>
            </template>
            <template #price_default="scope">
                <span>{{currencyFilter(scope.row.price)}}</span>
            </template>

            <template #deliNum_edit="scope">
                <vxe-input v-model="scope.row.deliNum" type="integer" min="0" max="99999999" :controls="false"
                           @change="(value)=>calTotalPrice(scope.row.price,value.value,scope)"></vxe-input>
            </template>

            <template #deliNum_default="scope">
                <span>{{currencyFilter(scope.row.deliNum)}}</span>
            </template>

            <template #totalPrice_default="scope">
                <span>{{currencyFilter(scope.row.totalPrice)}}</span>
            </template>

            <template #btn_default="{ row }">
                <template v-if="!isActiveStatus(row) && this.editable && (row.asnNo=='' || row.asnNo==null)">
                    <el-tooltip content="删除" placement="top">
                    <el-button
                    icon="el-icon-delete"
                    link
                    size="small"
                    type="primary"
                    @click="handleDelete(row)"
                    ></el-button>
                    </el-tooltip>
                </template>
                <template v-else>
                </template>
            </template>
        </vxe-grid>
    </div>
</template>

<script>
    import {findList} from "@/api/anwise/invoice/invoice_item";
    import {select as unitSelect} from "@/api/anwise/unit_info";
    import {getDictionary as getDictionaryBiz} from "@/api/system/dictbiz";
    import {getDictionary} from "@/api/system/dict";
    import {mapGetters} from "vuex";

    export default {
        components: {
        },
        data() {
            return {
                unitList: [],
                rmbDic:[],
                maxNo: 0,
                invNo: '',
                dateFormat: 'YYYY-MM-DD',
                pickerOptions: {},
                editRow: {},
                rowIndex: '',
                box: false,
                isEdit: false,
                iconSearch: true,
                searchShow: false,
                editable: true,
                list: [],
                customConfig: {
                    storage: true,
                    checkMethod({column}) {
                        if (['facName'].includes(column.field)) {
                            return false
                        }
                        return true
                    },
                },
                menuConfig: {},
                form: {},
                query: {},
                loading: true,
                data: [],
                selectionList: [],
                page: {
                    pageSize: 10,
                    currentPage: 1,
                    total: 0
                },
                subVisible: false,
                nameOptions: [{data: null}],
                validRules: {
                    deliNum: [
                        {required: true, message: '出货数量必须填写'}
                    ],
                    price: [
                        {required: true, message: '单价必须填写'}
                    ],
                },
                gridOptions: {
                    height: '400px',
                    border: true,
                    showOverflow: true,
                    keepSource: true,
                    size: "medium",
                    rowConfig: {
                        // keyField: 'id',
                        isHover: true
                    },
                    columnConfig: {
                        resizable: true
                    },
                    // editRules: ,
                    columns: [
                        // {type: 'checkbox', width: 50, fixed:'left', visible: true},
                        // {type: 'seq', width: 50, fixed:'left', align: "center"},
                        {
                            title: "ASN No.",
                            field: "asnNo",
                            maxlength: 1000,
                            minWidth: 150,
                            fixed: 'left',
                            filters: [{ data: '' }],
                            filterRender: { name: 'FilterInput'}
                        },
                        {
                            title: "PI No.",
                            field: "orderNo",
                            minWidth: 150,
                            editRender: {name: 'input'},
                            filters: [{ data: '' }],
                            filterRender: { name: 'FilterInput'}
                        },
                        {
                            title: "PO No.",
                            field: "poNo",
                            minWidth: 150,
                            editRender: {name: 'input'}
                        },
                        {
                            title: "客户条码",
                            field: "barCode",
                            maxlength: 1000,
                            minWidth: 150,
                        },
                        {
                            title: "产品描述",
                            field: "description",
                            minWidth: 150,
                            editRender: {name: 'input'}
                        },
                        {
                            title: "单位",
                            field: "unit",
                            minWidth: 150,
                            editRender: {placeholder: '请输入...', autofocus: '.vxe-input--inner', autoselect: true},
                            slots: {edit: 'unit_edit'},
                            width: 200,
                        },
                        {
                            title: "单价/100PCS",
                            field: "price",
                            minWidth: 150,
                            editRender: {placeholder: '请输入...', autofocus: '.vxe-input--inner', autoselect: true},
                            slots: {edit: 'price_edit',default: 'price_default'}
                        },
                        {
                            title: "出货数量",
                            field: "deliNum",
                            minWidth: 200,
                            editRender: {placeholder: '请输入...', autofocus: '.vxe-input--inner', autoselect: true},
                            slots: {edit: 'deliNum_edit',default: 'deliNum_default'}
                        },
                        {
                            title: "币别",
                            field: "currency",
                            minWidth: 200,
                            editRender: {placeholder: '请输入...', autofocus: '.vxe-input--inner', autoselect: true},
                            slots: {edit: 'currency_edit'},
                            width: 200,
                        },
                        {
                            title: "金额",
                            field: "totalPrice",
                            minWidth: 200,
                            slots: {default: 'totalPrice_default'},
                        },
                        {
                            field: 'btn',
                            title: '操作',
                            minWidth: 120,
                            align: "center",
                            fixed: "right",
                            visible: true,
                            slots: {default: 'btn_default'}
                        }
                    ]
                },
                supplierDic: []
            };
        },
        computed: {
            ...mapGetters(["permission"]),
            permissionList() {
                return {
                    addBtn: this.validData(this.permission.fcl_main_add, false),
                    viewBtn: this.validData(this.permission.fcl_main_view, false),
                    delBtn: this.validData(this.permission.fcl_main_delete, false),
                    editBtn: this.validData(this.permission.fcl_main_edit, false)
                };
            },
            ids() {
                let ids = [];
                this.selectionList.forEach(ele => {
                    ids.push(ele.id);
                });
                return ids.join(",");
            },
            subIds() {
                let ids = [];
                this.selectionListSub.forEach(ele => {
                    ids.push(ele.id);
                });
                return ids.join(",");
            }
        },
        mounted() {
            this.isEdit = false;
            this.disabledCommit(false);
            this.init();
            this.$nextTick(() => {
                console.log(this.$refs.tableRef)
                console.log(this.$refs.toolbarRef)
                this.$refs.tableRef.connect(this.$refs.toolbarRef);
            })
        },
        methods: {
            init() {
                unitSelect().then(res => {
                    this.unitList = res.data.data;
                });
                getDictionaryBiz({code: "rmb"}).then(res => {
                    this.rmbDic = res.data.data;
                })
            },
            insertAdditionalCost() {//新增额外费用
                let $this = this;
              let maxNo = 0;
              if ($this.$refs.tableRef.getTableData().fullData.length > 0) {
                maxNo = Number($this.$refs.tableRef.getTableData().fullData[$this.$refs.tableRef.getTableData().fullData.length - 1].invItem);
              }
                let obj = {
                    invNo: this.invNo,
                    barCode: "PHCOST",
                  invItem : maxNo+1
                };
                $this.$refs.tableRef.insertAt(obj, -1);
            },
            calTotalPrice(price,num,scope) {
                console.log('price',price)
                console.log('num',num)
                this.$refs.tableRef.updateStatus(scope);
                let row=scope.row;
                if (price && num) {
                    row.totalPrice = this.$toFixed(price * num/100,2);
                }
            },
            setData(editable, invNo) {
                if (invNo) {
                    this.query.invNo = invNo
                    this.invNo = invNo
                }
                this.onLoad(this.page)
                this.editable = editable;
                console.log(this.editable);
            },
            updateStatus(scope) {
                this.$refs.tableRef.updateStatus(scope);
            },
            calcSum(list, field) {
                let count = 0
                list.forEach(item => {
                    count += Number(item[field])
                })
                if (['totalPrice','deliNum'].includes(field)) {
                    return this.currencyFilter(this.$toFixed(count, 0));
                } else {
                    return this.currencyFilter(this.$toFixed(count, 2));
                }
            },
            // 在值发生改变时更新表尾合计
            updateFooterEvent(params) {
                let xTable = this.$refs.tableRef
                xTable.updateFooter()
            },
            footerMethod(table) {
                return [
                    table.columns.map((column, columnIndex) => {
                        if (columnIndex === 0) {
                            return '合计'
                        }
                        if (['totalPrice','deliNum'].includes(column.field)) {
                            return this.calcSum(table.data, column.field)
                        }
                        return null
                    })
                ]
            },
            refresh() {
                this.page = {
                    pageSize: 10,
                    currentPage: 1,
                }
                this.query = {}
                this.onLoad(this.page)
            },
            pageChange(e) {
                this.page = {
                    pageSize: e.pageSize,
                    currentPage: e.currentPage,
                }
                this.onLoad(this.page)
            },
            isActiveStatus(row) {
                const $table = this.$refs.tableRef
                if ($table) {
                    return $table.isEditByRow(row)
                }
            },
            clearAll() {
                this.data = [];
                this.$refs.tableRef.remove();
            },
            handleAddAsn() {
                this.$refs.selectAsnItemRef.showSelect(this.$refs.tableRef.getTableData().fullData);
            },
            handleAdd() {
                // if (this.asnNo) {
                //     getMaxItemNo(this.asnNo).then(res => {
                //         if (res.data.success) {
                //             this.maxNo = res.data.data;
                //         }
                //     })
                // } else {
                //     this.maxNo = this.$refs.tableRef.getTableData().fullData.length;
                // }
                console.log("this.list", this.list);
                this.$refs.selectOrderItemRef.showSelect(this.$refs.tableRef.getTableData().fullData);
                // this.isEdit = true;
                // const $table = this.$refs.tableRef
                // if (!$table.getEditRecord()) {
                //     console.log(this.tableRef)
                //     if ($table) {
                //         const obj = $table.insertAt({}, -1).then(res => {
                //             $table.setEditCell(res.row, 'facName');
                //         })
                //         console.log(obj)
                //         // this.searchShow = false
                //         // this.iconSearch = false
                //     }
                // }
            },
            contextMenuClickEvent(data) {
                const menu = data.menu;
                const row = data.row;
                const column = data.column;
                const $table = this.$refs.tableRef
                if ($table) {
                    switch (menu.code) {
                        case 'hideColumn':
                            $table.hideColumn(column)
                            break
                        case 'showAllColumn':
                            $table.resetColumn(true)
                            break
                        case 'copy':
                            // if (XEClipboard.copy(row[column.field])) {
                            //   ElMessage.success('保存成功')
                            // }
                            // ElMessage.success('复制成功')
                            break
                        case 'reload':
                            //  findList()
                            break
                        case 'insertAt':
                            $table.insertAt({}, row || -1).then(({row}) => {
                                $table.setEditCell(row, column || 'name')
                            })
                            break
                        case 'remove':
                            $table.remove(row)
                            break
                        case 'save':
                            // ElMessage.success('保存成功')
                            break
                    }
                }
            },
            disabledCommit(data) {
                this.$emit("disabledCommit", data);
            },
            editActivedEvent(row) {//激活单元格事件
                this.isEdit = true;
                this.disabledCommit(true);
            },
            editClosedEvent(row) {
                console.log(row)
                const $table = this.$refs.tableRef;
                $table.clearValidate();
                this.disabledCommit(false);
                // const $table = this.$refs.tableRef
                // console.log($table.getTableData().fullData);
                // const err = this.validEvent(row.row);
                // if (err) {
                //     return
                // }
                // if (row.column.field=='prodNum') {
                //     this.overflowNum(row.row.prodNum, row.row);
                // }

            },
            async handleSaveRow(row) {
                const err = await this.validEvent(row);
                if (err) {
                    return
                }

            },
            async validEvent(row) {
                const $table = this.$refs.tableRef
                const errMap = await $table.validate(row).catch(errMap => errMap)
                return errMap;

            },
            // 主表模块
            rowSave(row, done, loading) {
                add(row).then(() => {
                    this.onLoad(this.page);
                    this.$message({
                        type: "success",
                        message: "操作成功!"
                    });
                    done();
                }, error => {
                    window.console.log(error);
                    loading();
                });
            },
            rowUpdate(row, index, done, loading) {
                update(row).then(() => {
                    this.onLoad(this.page);
                    this.$message({
                        type: "success",
                        message: "操作成功!"
                    });
                    done();
                }, error => {
                    window.console.log(error);
                    loading();
                });
            },
            rowDel(row) {
                this.$confirm("确定将选择数据删除?", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                })
                    .then(() => {
                        return remove(row.id);
                    })
                    .then(() => {
                        this.onLoad(this.page);
                        this.$message({
                            type: "success",
                            message: "操作成功!"
                        });
                    });
            },
            async handleDelete(row) {
                console.log("row", this.list);
                const $table = this.$refs.tableRef
                if (row.id) {
                    this.$confirm('是否确认删除?', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning',
                    }).then(() => {
                        if ($table.getTableData().fullData.length === 1) {
                            this.$emit("disabledFiled", false);
                        }
                        $table.remove(row)

                    }).then(() => {
                        this.$message({type: "success", message: "操作成功，保存后生效!"});
                    })
                } else {
                    console.log("$table.getTableData().fullData.length", $table.getTableData().fullData.length);
                    if ($table.getTableData().fullData.length === 1) {
                        this.$emit("disabledFiled", false);
                    }
                    $table.remove(row)

                }
            },
            // handleDelete() {
            //   if (this.selectionList.length === 0) {
            //     this.$message.warning("请选择至少一条数据");
            //     return;
            //   }
            //   this.$confirm("确定将选择数据删除?", {
            //     confirmButtonText: "确定",
            //     cancelButtonText: "取消",
            //     type: "warning"
            //   })
            //     .then(() => {
            //       return remove(this.ids);
            //     })
            //     .then(() => {
            //       this.onLoad(this.page);
            //       this.$message({
            //         type: "success",
            //         message: "操作成功!"
            //       });
            //       this.$refs.crud.toggleSelection();
            //     });
            // },
            beforeEdit({row, rowIndex, column, columnIndex}) {
                console.log("editable:" + this.editable)
                if (row.asnNo!="" && row.asnNo!=null) {
                    return false
                }
                return true && this.editable;
            },
            beforeOpen(done, type) {
                if (["edit", "view"].includes(type)) {
                    getDetail(this.form.id).then(res => {
                        this.form = res.data.data;
                    });
                }
                done();
            },
            searchReset() {
                this.query = {};
                this.onLoad(this.page);
            },
            searchChange(params, done) {
                this.query = params;
                this.page.currentPage = 1
                this.onLoad(this.page, params);
                done();
            },
            selectionChange(list) {
                this.selectionList = list;
            },
            selectionClear() {
                this.selectionList = [];
                if (this.$refs.crud) this.$refs.crud.toggleSelection();
            },
            currentChange(currentPage) {
                this.page.currentPage = currentPage;
            },
            sizeChange(pageSize) {
                this.page.pageSize = pageSize;
            },
            formateDate(list) {
                list.forEach(item => {
                    // item.maxtotalNum = item.orderNum;
                })
            },
            onLoad(page, params = {}) {
                this.query.invNo = this.invNo;
                if (this.$refs.tableRef.getInsertRecords().length > 0 || this.$refs.tableRef.getRemoveRecords().length > 0 ||
                    this.$refs.tableRef.getUpdateRecords().length > 0) {
                    this.$confirm("搜索会丢失本次新增/编辑/删除的数据，确定继续吗?", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning"
                    }).then(() => {
                        this.loading = true;
                        console.log('aaaaaaaaaaaa', this.query)
                        findList(Object.assign(params, this.query)).then(res => {
                            const data = res.data.data;
                            // this.page.total = data.total;
                            this.list = data;
                            this.loading = false;
                            this.selectionClear();
                            this.isEdit = false;
                            this.formateDate(this.list);
                        });
                    })
                } else {
                    this.loading = true;
                    console.log('aaaaaaaaaaaa', this.query)
                    findList(Object.assign(params, this.query)).then(res => {
                        const data = res.data.data;
                        // this.page.total = data.total;
                        this.list = data;
                        this.loading = false;
                        this.selectionClear();
                        this.isEdit = false;
                        this.formateDate(this.list);
                    });
                }
            },

        }
    };
</script>

<style scoped>
    :deep(.vxe-pulldown.size--medium) {
        z-index: 99999 !important;
    }

    .vxe-table--tooltip-wrapper {
        z-index: 10000 !important;
    }

    :deep(.vxe-table--fixed-right-wrapper) {
        z-index: 99999 !important;
    }

    :deep(.vxe-table--render-default.size--medium .vxe-header--column:not(.col--ellipsis)) {
        padding: 1px 0 !important;
    }
</style>
